<template>
  <el-container>
    <el-main>
      <div
        v-if=!flag
        style="text-align:left"
      >
        <el-input
          v-model="newsection.sectionName"
          style="width:300px"
          placeholder="请输入添加科目名称"
          @keyup.enter.native='addsection'
        ></el-input>
        <el-button
          @click="addsection"
          style="margin-left:40px;margin-right:10px"
          type="primary"
        >添加科目<i class="el-icon-upload el-icon--right"></i></el-button>
        <el-table
          class="table table-hover"
          style="table-layout:fixed;text-align:left;margin-top:20px"
          width="100%"
          :data="list"
        >
          <el-table-column
            label="编号"
            prop="sid"
          ></el-table-column>
          <el-table-column
            label="科目名称"
            prop="sectionName"
          ></el-table-column>
          <el-table-column align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.sid)"
              >Delete</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-main>
  </el-container>
</template>

<script>
import { request } from 'network/request'
export default {
  name: 'ManageSection',
  data () {
    return {
      flag: false,
      list: [],
      newsection: {
        sectionName: ''
      }
    }
  },
  created () {
    this.getsec()
  },
  methods: {
    getsec () {
      request({
        url: '/section',
        method: 'get'
      }).then(res => {
        // console.log(res.data.sections);
        this.list = res.data.sections
      })
    },
    addsection () {
      request({
        url: '/section',
        method: 'post',
        data: this.newsection
      }).then(res => {
        // console.log(res.status);
        this.$message({
          message: '添加成功',
          type: 'success',
          duration: 1500
        })
        this.newsection = ''
        this.getsec()
      }).catch(err => {
        if (err) {
          this.$message({
            message: '添加失败',
            type: 'error',
            duration: 1500
          })
        }
      })
    },
    handleDelete (id) {
      // console.log(id);
      request({
        url: '/section/' + id,
        method: 'delete'
      }).then(res => {
        // console.log(res.status);
        this.$message({
          message: '删除成功',
          type: 'success',
          duration: 1500
        })
        this.getsec()
      }).catch(err => {
        if (err) {
          this.$message({
            message: '删除失败',
            type: 'error',
            duration: 1500
          })
        }
      })
    }
  }
}
</script>

<style lang = "less" scoped>
</style>
